<template>
	<view>
		<view>
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">搜索<text class="text-red padding-sm">{{key}}</text>的结果</block>
			</cu-custom>
		</view>
		<view v-for="(item , index) in searchlist" :key="index" @click="goDetails" :data-cid="item.cid" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
		 v-if="!loadModal">
			<view class="cu-card article">
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut">{{item.title}}</view>
					</view>
					<view class="content">
						<image :src="item.thumb[0].str_value" mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">{{item.description[0].str_value}}</view>
							<view>
								<view class="cu-tag bg-red light sm round"><text class="cuIcon-messagefill margin-lr-xs"></text>
									{{item.commentsNum}}</view>
								<view class="cu-tag bg-green light sm round"><text class="cuIcon-appreciatefill margin-lr-xs"></text>{{item.likes[0].likes}}</view>
								<view class="cu-tag bg-green light sm round">
									<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.views[0].views}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="justify-center padding-lr" v-if="showimg && !loadModal">
			<image src="../../static/none.png" style="width: '750rpx';" mode="aspectFit"></image>
		</view>

		<view class="cu-load load-modal" v-if="loadModal">
			<view class="cuIcon-emojifill text-orange"></view>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	var API = require('../../utils/api');
	var Net = require('../../utils/net');

	export default {
		data() {
			return {
				key: '',
				searchlist: [],
				showimg: true,
				loadModal: false,
			}
		},
		onLoad(res) {
			var that = this;
			that.key = res.key;
			Net.request({
				url: API.Search(that.key),
				success: function(res) {
					if (res.data.data == "none") {
						console.log("没有结果呀")
					} else {
						that.searchlist = res.data.data;
						that.showimg = false;
					}
				}
			});
			that.loading();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {}
			return {
				title: "搜索"+ this.key + "的结果",
				path: '/pages/searchlist/searchlist?key='+this.key
			}
		},
		methods: {
			goDetails: function(e) {
				uni.navigateTo({
					url: "/pages/details/details?cid=" + e.currentTarget.dataset.cid
				})
			},
			loading: function() {
				this.loadModal = true;
				setTimeout(() => {
					this.loadModal = false;
				}, 300)
			},
			// getSearchList: function() {
			// 	var that = this;
			// 	var key = that.key;
			// 	Net.request({
			// 		url: API.Search(key),
			// 		success: function(res) {
			// 			console.log(res.data.data)
			// 			that.searchlist = res.data.data;
			// 		}
			// 	})	
			// },
		}
	}
</script>

<style>
	.shadow {
		box-shadow: 2upx 4upx 15upx #c2c2c2;
	}

</style>
